<template>
  <div class="editJob">
    <van-popup :value="userJob" @open="handleOpen" position="right">
      <van-nav-bar
        title="修改岗位名称"
        left-text=""
        right-text="保存"
        left-arrow
        @click-left="handleBack"
        @click-right="onClickRight"
      />
      <van-form ref="form">
        <van-field
          v-model.trim="userInfopositions"
          placeholder="请输入内容"
          :rules="rules"
        />
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { auEdit } from '@/api/my.js'
export default {
  name: 'EditJob',
  props: {
    userJob: {
      type: Boolean,
      default: false
    },
    userInfoposition: {
      type: String,
      default: ''
    }
  },
  model: {
    prop: 'userJob'
  },
  data () {
    return {
      userInfopositions: '', //  打开弹窗时获取到的岗位名称并用于双向绑定
      beforeEditJob: '', //  打开弹窗时获取到的岗位名称,用于校验时是否更改的对比
      rules: [
        {
          required: true,
          message: '必填',
          trigger: 'onChange'
        },
        {
          validator: (nowJob) => {
            return nowJob.length < 7
          },
          message: '长度不能超过6个字数',
          trigger: 'onBlur'
        },
        {
          validator: (nowJob) => {
            return nowJob !== this.beforeEditJob
          },
          message: '您未做修改',
          trigger: 'onBlur'
        }
      ]
    }
  },

  methods: {
    onClickRight () {
      this.$refs.form
        .validate()
        .then(() => {
          const afterEditJob = this.userInfopositions
          auEdit({ position: afterEditJob })
          this.$toast.success('修改成功')
        })
        .catch(() => {})
    },
    // 打开弹窗
    handleOpen () {
      this.userInfopositions = this.userInfoposition
      this.beforeEditJob = this.userInfoposition
    },
    // 关闭弹窗
    handleBack () {
      this.$emit('refreshPage')
      this.$emit('input', false)
    }
  }
}
</script>

<style lang="less" scoped>
.van-popup {
  width: 100%;
  height: 100%;
}
::v-deep .van-field__control {
  margin-top: 20px;
  height: 80px;
  background-color: #f7f4f5;
}
</style>
